import React, { Component } from 'react'
import Swiper from 'react-id-swiper'
import store from '../../../store/store'

import BScroll from 'better-scroll'

import '@css/city/city_list.scss'
import CityNavigation from './Navigation'
import ListForeign from './Foreign'

export default class CityList extends Component{
    constructor(props) {
        super(props)
        this.state={
            tabIndex: 0,
            city: store.getState(),
            swiperOffsetTop: 0,
            letter: '',
            showLetter: false
        }
        this.Swiper = React.createRef()
    }
    render() {
        return <div className="city-list">
            <div className="tab">
                <div className={this.state.tabIndex?'tab-item':'tab-item active'} onClick={()=> this.handleTabClick(0)}>
                    <span>国内城市</span>
                </div>
                <div className={this.state.tabIndex?'tab-item active':'tab-item' } onClick={() => this.handleTabClick(1)}>
                    <span>国际/港澳台</span>
                </div>
            </div>
            <Swiper ref={this.Swiper}>
                <div className="internal">
                    <div className="wrapper">
                        <div className="content">
                            <div className="area">
                                <div className="title">当前城市</div>
                                <div className="body">
                                    <div className="btn">{this.state.city}</div>
                                </div>
                            </div>
                            <div className="area">
                                <div className="title">热门城市</div>
                                <div className="body">
                                    {this.props.hotCities.map(item=>
                                        <div className="btn" key={item.id} onClick={()=> this.handleCityClick(item.name)}>{item.name}</div>
                                    )}
                                </div>
                            </div>
                            <div className="area">
                                {/* Object.key()可以获取对象内的key，返回数组 */}
                                {Object.keys(this.props.cities).map(key=>
                                    <div key={key}>
                                        <div className="title" ref={(elem)=>this[key] = elem}>{key}</div>
                                        <div className="body cities">
                                            {this.props.cities[key].map(item=><div className="city" onClick={()=> this.handleCityClick(item.name)} key={item.id}>{item.name}</div>)}
                                        </div>
                                    </div>
                                )}
                            </div>
                        </div>
                    </div>
                    {this.state.showLetter && <div className="now-letter">{this.state.letter}</div>}
                    <CityNavigation handleSetLetter={this.handleSetLetter} cities={ this.props.cities } swiperOffsetTop={this.state.swiperOffsetTop}/>
                </div>
                <div className="foreign">
                    <ListForeign foreignCities={this.props.foreignCities}/>
                </div>
            </Swiper>
        </div>
    }
    // 城市选取
    handleCityClick = (city)=>{
        store.dispatch({type: 'SETCITY', city: city})
        window.history.go(-1)
    }
    // tab栏点击
    handleTabClick = (index)=>{
        this.Swiper.current.swiper.slideTo(index)
        // 由于已经注册swiper变化时 的事件，所以下面代码可以不做设置
        // this.setState({
        //     tabIndex: index
        // })
        
    }
    // 根据传回的letter设置scroll位置
    handleSetLetter = (letter)=>{
        this.setState({
            letter,
            showLetter: true
        })
        this.scroll.stop()
        // 根据导航传回的letter，进行城市scroll跳转
        this.scroll.scrollToElement(this[letter]);
        // 延时隐藏letter显示标识
        if(this.timer){
            clearTimeout(this.timer)
        }
        this.timer = setTimeout(()=>{
            this.setState({
                showLetter: false
            })
        }, 1500)
    }
    componentDidMount(){
        // 获取list的offsettop
        let swiperOffsetTop = document.documentElement.querySelector('.swiper-container').offsetTop;
        this.setState({
            swiperOffsetTop
        })
        // 注册swiper变化事件
        this.Swiper.current.swiper.on('slideChangeTransitionEnd', ()=>{
            this.setState({
                tabIndex: this.Swiper.current.swiper.activeIndex
            })
        })

        // 初始化scroll
        this.scroll = new BScroll('.wrapper', {click: true})
    }

}